<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.css">
    <title>bs</title>
    <style>
        .test-box {
            z-index: 2000;
        }

        .test-box button{
            /*flex: 0 0 33.3333%;*/
            flex-grow: 1;
            flex-shrink: 0;
        }

    </style>
<body class="bg-light">


<div class="position-fixed top-50 start-50 translate-middle test-box">
    <div class="d-flex align-items-center justify-content-center flex-wrap">
        <button class="btn btn-success" id="top-left">top-left</button>
        <button class="btn btn-success" id="top-center">top-center</button>
        <button class="btn btn-success" id="top-right">top-right</button>
        <button class="btn btn-success" id="bottom-left">bottom-left</button>
        <button class="btn btn-success" id="bottom-center">bottom-center</button>
        <button class="btn btn-success" id="bottom-right">bottom-right</button>

    </div>

</div>


<script src="https://unpkg.com/bs5-toast/dist/bs5-toast.js"></script>


<script src="bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
<script src="dist/js/bootstrap-notify.min.js"></script>


<script>

    document.querySelector('#top-left').addEventListener('click', function () {

        //为了更好的演示效果，先删除别的方位的通知
        BootstrapNotify.reset(['top-center','top-right','bottom-left','bottom-center','bottom-right']);
        BootstrapNotify.show({
            body: '登录成功！！',
            placement: 'top-left'
        });

    });



    document.querySelector('#top-center').addEventListener('click', function () {
        BootstrapNotify.reset(['top-left','top-right','bottom-left','bottom-center','bottom-right']);

        BootstrapNotify.show({
            body: 'this is body this is body this is body this is body this is body this is body this is body this is body ',
            header: 'this is header ',
            placement: 'top-center'
        });

    });



    document.querySelector('#top-right').addEventListener('click', function () {
        BootstrapNotify.reset(['top-center','top-left','bottom-left','bottom-center','bottom-right']);

        BootstrapNotify.show({
            body: 'this is body this is body this is body this is body this is body this is body this is body this is body ',
            header: 'this is header ',
            placement: 'top-right'
        });

    });



    document.querySelector('#bottom-left').addEventListener('click', function () {
        BootstrapNotify.reset(['top-center','top-right','top-left','bottom-center','bottom-right']);

        BootstrapNotify.show({
            body: 'this is body this is body this is body this is body this is body this is body this is body this is body ',
            header: 'this is header ',
            placement: 'bottom-left'
        });

    });



    document.querySelector('#bottom-center').addEventListener('click', function () {

        BootstrapNotify.reset(['top-center','top-right','bottom-left','top-left','bottom-right']);

        BootstrapNotify.show({
            body: 'this is body this is body this is body this is body this is body this is body this is body this is body ',
            header: 'this is header ',
            placement: 'bottom-center'
        });

    });

    document.querySelector('#bottom-right').addEventListener('click', function () {

        BootstrapNotify.reset(['top-center','top-right','bottom-left','bottom-center','top-left']);
        BootstrapNotify.show({
            body: 'this is body this is body this is body this is body this is body this is body this is body this is body ',
            header: 'this is header ',
            placement: 'bottom-right'
        });

    });


</script>

</body>
</html>
